<template>
	<view class="page">
		<!-- <view class="shop-item bg-white height-100 margin-top-sm padding-lr text-df flex justify-between align-center solid-bottom">
		  <view class="_left">
		    银行开户名
		  </view>
		  <view class="_right text-cut  text-cut  text-right">
		    <input type="text" placeholder="请输入银行开户名" placeholder-class="placeholder" />
		  </view>
		</view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">
        开户银行账号
      </view>
      <view class="_right text-cut  text-cut  text-right">
        <input type="text" placeholder="请输入开户银行账号" placeholder-class="placeholder" />
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">
        开户银行支行名称
      </view>
      <view class="_right text-cut  text-cut  text-right">
        <input type="text" placeholder="请输入开户银行支行名称" placeholder-class="placeholder" />
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">
        开户银行所在地
      </view>
      <view class="_right text-cut  text-cut  text-right">
        <input type="text" placeholder="请输入开户银行所在地" placeholder-class="placeholder" />
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center">
      <view class="_left">
        支行联行号
      </view>
      <view class="_right text-cut  text-cut  text-right">
        <input type="text" placeholder="请输入支行联行号" placeholder-class="placeholder" />
      </view>
    </view> -->
		<view class="shop-item bg-white height-100 padding-lr margin-top-sm text-df flex justify-between align-center solid-bottom">
			<view class="_left">结算类型</view>
			<view class="_right text-cut  text-cut  text-right" @click="openPicker('settlement')">
				<text v-if="!settlementVal.id" class="text-bf">请选择结算类型</text>
				<text v-else>{{ settlementVal.name }}</text>
				<text class="cuIcon-right margin-left-sm"></text>
			</view>
		</view>
		<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
			<view class="_left">结算账户</view>
			<view class="_right text-cut  text-cut  text-right"><input type="text" :placeholder="info.account_type != 3?'请输入结算账户':'请输入银行卡号'" v-model="info.account_id" placeholder-class="placeholder" /></view>
		</view>
		<block v-if="info.account_type != 3">
			
			<view class="shop-item bg-white padding-tb padding-lr text-df flex align-center justify-between solid-bottom">
				<view class="_left">收款二维码</view>
				<view class="_right flex margin-top justify-end">
					<image src="../../static/upload-img.png" mode="" class="up-img" v-if="!info.qrcode" @click="upLoadImg()"></image>
					<view class="img-wrap" v-else>
						<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg()"></text>
						<image class="img" :src="qrcode" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="shop-item bg-white height-100  padding-lr text-df flex justify-between align-center solid-bottom">
				<view class="_left">真实姓名</view>
				<view class="_right text-right"><input type="text" placeholder="请输入真实姓名" v-model="info.true_name" placeholder-class="placeholder" /></view>
			</view>
		</block>
		<block v-if="info.account_type == 3">
			<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
				<view class="_left">结算开户名</view>
				<view class="_right text-cut  text-cut  text-right">
					<input type="text" placeholder="请输入银行卡开户名" v-model="info.account_name" placeholder-class="placeholder" />
				</view>
			</view>

			<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
				<view class="_left">结算开户银行支行名称</view>
				<view class="_right text-cut  text-cut  text-right">
					<input type="text" placeholder="请输入结算开户银行支行名称" v-model="info.bank_branch" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
				<view class="_left">结算开户银行所在地</view>
				<view class="_right text-cut  text-cut  text-right">
					<input type="text" placeholder="请输入结算开户银行所在地" v-model="info.bank_address" placeholder-class="placeholder" />
				</view>
			</view>
		</block>
		<view class="btn-wrap flex justify-between align-center margin-tb-xl margin-lr">
			<view class="btn" @click="handlerPre">上一步</view>
			<view class="btn active" @click="handlerNext">下一步</view>
		</view>
		<!-- 结算类型 -->
		<w-picker
			:visible.sync="visible"
			mode="selector"
			:value="settlementVal.name"
			default-type="name"
			:default-props="defaultProps"
			:options="settlementList"
			@confirm="onConfirm($event, 'settlement')"
			@cancel="onCancel"
			ref="settlement"
			themeColor="#D72620"
		></w-picker>
	</view>
</template>

<script>
// @see 引入验证，上传图片
import { UploadImage, validate } from '@/common/utils/index';
export default {
	data() {
		return {
			visible: false,
			settlementVal: {}, //结算
			defaultProps: { label: 'name', value: 'id' },
			settlementList: [],
			info: {
				account_type: '', //账户类型 1 微信 2 支付宝 3 银行卡
				account_id: '', //结算账户 微信UNIONID 支付宝账户 银行卡号
				account_name: '', //银行开户名
				bank_branch: '', //银行开户支行
				bank_address: '', //开户银行所在地
				qrcode: '', //收款二维码
				true_name: '' //真实姓名
			},
			qrcode: ''
		};
	},
	onLoad() {
		this.getAccountType();
	},
	methods: {
		/**
		 * @description 上传收款二维码
		 */
		upLoadImg() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					console.log(res);
					let list = res.tempFilePaths;
					list.forEach((val, i) => {
						this.uploadUserImg(val);
					});
				}
			});
		},
		/**
		 * @description 上传图片
		 */
		uploadUserImg(blob) {
			// uni.showLoading();
			let _this = this;
			// 开始上传
			new UploadImage([blob], {
				complete: res => {
					console.log(res);
					if (res.length) {
						this.info.qrcode = res[0].id;
						this.qrcode = res[0].path;
					}
				}
			});
		},
		clearImg() {
			this.info.qrcode = '';
			this.qrcode = '';
		},
		getAccountType() {
			this.$api
				.post(global.apiUrls.account_type)
				.then(res => {
					console.log(res);
					if (res.data.code == 1) {
						let list = res.data.data;
						let account = [];
						for (let attr in list) {
							account.push({ id: attr, name: list[attr] });
						}
						this.settlementList = account;
						this.settlementVal = account[0];
						this.info.account_type = account[0].id;
					} else {
						this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 上一步
		handlerPre() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 下一步
		handlerNext() {
			let info = this.info;
				let regAliyun = /^(?:1[2-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
			if (!info.account_type.trim()) return this.$message.info('请选择结算类型');
			if (!info.account_id.trim()) return this.$message.info('请输入结算账户');
//   let regEmoji = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
			// if(!regEmoji.test(info.account_id)){
			// 	this.$message.info('结算账户不能输入表情');
			// 		return
			// 	}
			if (info.account_type != 3) {
				if (!info.qrcode) return this.$message.info('请上传收款二维码');
				if (!info.true_name.trim()) return this.$message.info('请输入真实姓名');
				// if(!regEmoji.test(info.true_name)){
				// 	this.$message.info('真实姓名不能输入表情');
				// 	return
				// }
			} else {
				if (!info.account_name.trim()) return this.$message.info('请输入银行开户名');
				if (!info.bank_branch.trim()) return this.$message.info('请输入开户支行');
				if (!info.bank_address.trim()) return this.$message.info('请输入银行所在地');
			}
			let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
			let store_user_id = uni.getStorageSync('store_user_id') || 0;
			this.$api
				.post(global.apiUrls.settlement_account, info, {
					header: {
						Storeid: store_joinin_id,
						Userid:store_user_id
					}
				})
				.then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.navigateTo({
							url: '/pages/user/shop/shop-info/index'
						});
					} else {
						this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 打开弹窗
		openPicker(type) {
			this.$refs[type].show();
		},
		onCancel() {},
		onConfirm(res, type) {
			console.log(res, type);
			if (type == 'settlement') {
				this.settlementVal = res.obj;
				this.info.account_type = res.value;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.height-100 {
	height: 100rpx;
}
.placeholder {
	color: #bfbfbf;
	font-size: 28rpx;
}
.text-bf {
	color: #bfbfbf;
}
.shop-item {
	._left {
		width: 300rpx;
	}
	._right {
		width: calc(100% - 300rpx);
		.up-img {
			width: 150rpx;
			height: 150rpx;
			position: relative;
		}
		.img-wrap {
			width: 150rpx;
			height: 150rpx;
			border: 1px dashed #eeeeee;
			position: relative;
			.close {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				z-index: 11;
			}
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    // background-color: #FFFFFF;

    .btn {
      width: 300rpx;
      height: 88rpx;
      line-height: 86rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      background: #ffffff;
      color: $theme;
      border-radius: 44rpx;
      border: 1px solid $theme;

      &.active {
        background: $bgtheme;
        color: #ffffff;
      }
    }
  }
</style>
